<template>
    <div>
        
        <el-card class="userinfo" shadow="hover">
            <div slot="header" class="clearfix">
                <span style="float:left;">个人基本信息</span> 
                
            </div>
            <div>
                <el-form :v-model="getUserInfo" label-position="left" label-width="80px" class="showInfo">
                    <el-form-item label="用户名:">
                        <span>{{getUserInfo.username}}</span>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="昵称:">
                        <span>{{getUserInfo.nickname}}</span>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="手机:">
                        <span>{{getUserInfo.phone}}</span>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="邮箱:">
                        <span>{{getUserInfo.email}}</span>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="角色:">
                        <span>{{getUserInfo.roles}}</span>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="类型:">
                        <span>{{getUserInfo.type}}</span>
                    </el-form-item>
                    <el-divider></el-divider>
                </el-form>
                
            </div>
        </el-card>
        <el-card class="modifyInfo" shadow="hover">
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本资料" name="first">
                    <el-form :model="modifyuser" label-position="left" label-width="80px" :rules="infoRule" ref="infoForm">
                        <el-form-item label="用户昵称" prop="nickname">
                            <el-input placeholder="请输入昵称" v-model="modifyuser.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phone">
                            <el-input placeholder="请输入手机号码" v-model="modifyuser.phone"> </el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email"> 
                            <el-input placeholder="请输入邮箱" v-model="modifyuser.email"></el-input>
                        </el-form-item>
                        <!--<el-form-item label="性别" v-model="modifyuser.gender" prop="gender">
                            <el-radio-group style="float:left;margin-top:12px"  v-model="modifyuser.gender" >
                                <el-radio label="男">男</el-radio>
                                <el-radio label="女">女</el-radio>
                            </el-radio-group>
                        </el-form-item>-->
                        <el-form-item style="float:left;"> 
                            <el-button type="primary" @click="submitInfo()">保存</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="second">
                    <el-form label-position="left" label-width="80px" :model="modifyPassword" ref="passwordForm" :rules="passwordRule">
                        <el-form-item label="用户名">
                            <el-input v-model="getUserInfo.username" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="旧密码" prop="oldPassword" >
                            <el-input show-password  placeholder="请输入旧密码" v-model="modifyPassword.oldPassword"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newPassword">
                            <el-input show-password placeholder="请输入新密码(不包含特殊符号+#%等)" v-model="modifyPassword.newPassword"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="qyPassword"> 
                            <el-input show-password placeholder="请确认密码(不包含特殊符号+#%等)" v-model="modifyPassword.qyPassword"></el-input>
                        </el-form-item>
                        <el-form-item style="float:left;"> 
                            <el-button type="primary" @click="submitPassword()">保存</el-button>
                            <el-button type="info" @click="resetForm('passwordForm')">清空</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
    
</template>

<script>
import {modifyPassword} from '@/api/login.js'
export default {
    data() {
        return {
            activeName:"first",
            modifyPassword:{
                newPassword:"",
                oldPassword:"",
                qyPassword: ""
            },
            card:false,
            modifyuser:{},
            passwordRule:{
                oldPassword: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
                ],
                qyPassword: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
                ],
            },
            infoRule:{
                nick: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { min: 8, max: 18, message: '长度在 8 到 18 个字符', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请输入性别', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        copyInfo(){
            this.modifyuser = JSON.parse(JSON.stringify(this.getUserInfo));
            console.log(this.modifyuser);
        },
        submitInfo(){
            this.$refs.infoForm.validate((valid)=>{
                if(!valid) return;
                console.log(this.modifyuser);
            })
            console.log(this.modifyuser);
        },
        submitPassword(){
            var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]");
            if(!flag.test(this.modifyPassword.newPassword)){
            this.$refs.passwordForm.validate((valid)=>{
                if(valid && this.modifyPassword.newPassword === this.modifyPassword.qyPassword){
                    modifyPassword(this.modifyPassword).then(res=>{
                        this.$message.success(res.message)
                        this.$router.push('/login')
                    })
                } else{
                    this.$message.error("两次新密码不一致，请检查重新输入。")
                }
            })}else{
                    this.$message.error("新密码中包含特殊符号。");
                }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    created() {
        this.copyInfo();
    },
    computed:{
        getUserInfo(){
            return this.$store.state.user.userinfo
        }
    }
}
</script>

<style lang="less" scoped>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 17px;
}
.userinfo{
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 10px;
    width: 30%;
    height: 470px;
    /* // border-radius: 20px; */
    float: left;
}
.clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
.clearfix:after {
    clear: both
}
.modifyInfo{
    margin-top: 20px;
    width: 60%;
    height: 470px;
    float: left;
}
.list-group-item{
    list-style-type: none;
    float: left;
}
.el-divider{
    margin: 5px;
    
}

.showInfo{
    el-form-item{
        margin-bottom: 0px;
    }
}
</style>